const canvas = document.getElementById("can");
const ctx = canvas.getContext("2d");

resize();
window.onresize = resize;

function resize() {
    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}

const RAF = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame
        || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

// 鼠标活动时，获取鼠标坐标
const area = {x: null, y: null, max: 20000};
window.onmousemove = function (e) {
    e = e || window.event;
    area.x = e.clientX;
    area.y = e.clientY;
};
window.onmouseout = function (e) {
    area.x = null;
    area.y = null;
};

function rand(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
}

class Circle {
    constructor() {
        this.r = rand(5, 15);
        let x = rand(0, canvas.width - this.r);
        let y = rand(0, canvas.height - this.r);
        this.x = x < this.r ? this.r : x;
        this.y = y < this.r ? this.r : y;
        let speed = rand(1, 3);
        this.speedX = rand(0, 4) > 2 ? speed : -speed;
        this.speedY = rand(0, 4) > 2 ? speed : -speed;
    }

    drawCircle(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 360);
        ctx.closePath();
        ctx.fillStyle = 'rgba(204,204,204,0.3)';
        ctx.fill();
    }

    drawLine(ctx, _circle) {
        let dx = this.x - _circle.x;
        let dy = this.y - _circle.y;
        let d = Math.sqrt(dx * dx + dy * dy);
        if (d < 150) {
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(_circle.x, _circle.y);
            ctx.closePath();
            ctx.strokeStyle = 'rgba(204,204,204,0.3)';
            ctx.stroke();
        }
    }

    move(w, h) {
        this.x += this.speedX / 10;
        if (this.x > w || this.x < 0) {
            this.speedX *= -1;
        }
        this.y += this.speedY / 10;
        if (this.y > h || this.y < 0) {
            this.speedY *= -1;
        }
    }
}

class curCircle extends Circle {
    constructor() {
        super();
    }

    drawCircle(ctx) {
        ctx.beginPath();
        this.r = 5;
        ctx.arc(this.x, this.y, this.r, 0, 360);
        ctx.closePath();
        ctx.fillStyle = 'rgba(255,77,54,0.6)';
        ctx.fill();
    }
}

setTimeout(function () {
    animate();
}, 100);

let circles = [];
let circle = new curCircle();
let w = canvas.width = canvas.offsetWidth;
let h = canvas.height = canvas.offsetHeight;
function animate() {
    ctx.clearRect(0, 0, w, h);
    for (let i = 0; i < 100; i++) {
        circles.push(new Circle());
    }
    for (let i = 0; i < circles.length; i++) {
        circles[i].drawCircle(ctx);
        for (let j = i + 1; j < circles.length; j++) {
            circles[i].drawLine(ctx, circles[j]);
        }
        circles[i].move(w, h);
    }
    if (circle.x) {
        circle.drawCircle(ctx);
        for (let k = 1; k < circles.length; k++) {
            circle.drawLine(ctx, circles[k])
        }
    }
    // requestAnimationFrame(animate);
    // RAF(animate);

}